<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/employeeList' }">在职人员档案</el-breadcrumb-item>
                <el-breadcrumb-item>{{pageTitle}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- <div class="handle-box flex flex-center">
                <el-button type="primary" icon="el-icon-close" @click="close">关闭</el-button>
            </div>-->
            <div class="table-form-box">
                <h3 class="h3">人员档案</h3>
                <table border="0" width="100%" cellpadding="0" cellspacing="1">
                    <colgroup>
                        <col width="8%" />
                        <col width="16%" />
                        <col width="8%" />
                        <col width="16%" />
                        <col width="8%" />
                        <col width="16%" />
                    </colgroup>
                    <thead></thead>
                    <tbody>
                        <tr class="tr-title">
                            <td colspan="6">基本信息</td>
                        </tr>
                        <tr>
                            <td align="right">编号:</td>
                            <td>{{formData.id}}</td>
                            <td align="right">工号:</td>
                            <td>{{formData.jobNumber}}</td>
                            <td rowspan="9" align="right">照片:</td>
                            <td rowspan="9">
                                <div class="crop-demo">
                                    <img :src="formData.idPhoto" class="pre-img" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">姓名:</td>
                            <td>{{formData.name}}</td>
                            <td align="right">性别:</td>
                            <td>{{formData.gender == true?'男':'女' }}</td>
                        </tr>
                        <tr>
                            <td align="right">出生日期:</td>
                            <td>{{formData.birthday|formatDate}}</td>
                            <td align="right">身份证号码:</td>
                            <td>{{formData.identityNo}}</td>
                        </tr>
                        <tr>
                            <td align="right">政治面貌:</td>
                            <td>{{formData.politicalStatusName}}</td>
                            <td align="right">婚姻状况:</td>
                            <td>{{formData.maritalStatus== true?'已婚':'未婚' }}</td>
                        </tr>
                        <tr>
                            <td align="right">国籍:</td>
                            <td>{{formData.countryName}}</td>
                            <td align="right">籍贯:</td>
                            <td>{{formData.hometownName}}</td>
                        </tr>
                        <tr>
                            <td align="right">户口:</td>
                            <td>{{formData.regResidence}}</td>
                            <td align="right">户口性质:</td>
                            <td>{{formData.regResidenceNature== true?'城镇户口':'农村户口' }}</td>
                        </tr>
                        <tr>
                            <td align="right">家庭住址:</td>
                            <td>{{formData.familyAddress}}</td>
                            <td align="right">电子邮箱:</td>
                            <td>{{formData.email}}</td>
                        </tr>

                        <tr>
                            <td align="right">联系电话:</td>
                            <td>{{formData.phone}}</td>
                            <td align="right">毕业院校:</td>
                            <td>{{formData.graduateSchool}}</td>
                        </tr>
                        <tr>
                            <td align="right">专业:</td>
                            <td>{{formData.profession}}</td>
                            <td align="right">最高学位:</td>
                            <td>{{formData.mostDegree}}</td>
                        </tr>
                        <tr>
                            <td align="right">毕业日期:</td>
                            <td>{{formData.graduationDate|formatDate}}</td>
                            <td align="right">紧急联系人:</td>
                            <td>{{formData.emergencyContact}}</td>
                            <td align="right">紧急联系人电话:</td>
                            <td>{{formData.emergencyNumber}}</td>
                        </tr>
                    </tbody>
                </table>
                <table class="mt20" border="0" width="100%" cellpadding="0" cellspacing="1">
                    <colgroup>
                        <col width="8%" />
                        <col width="16%" />
                        <col width="8%" />
                        <col width="16%" />
                        <col width="8%" />
                        <col width="16%" />
                    </colgroup>
                    <thead></thead>
                    <tbody>
                        <tr class="tr-title">
                            <td colspan="6">入职信息</td>
                        </tr>
                        <tr>
                            <td align="right">入职时间:</td>
                            <td>{{formData.onbordingTime|formatDate}}</td>
                            <td align="right">转正日期:</td>
                            <td>{{formData.correctDate|formatDate}}</td>
                            <td align="right">离职时间:</td>
                            <td>{{formData.resignationDate|formatDate}}</td>
                        </tr>
                        <tr>
                            <td align="right">所在部门:</td>
                            <td>{{formData.departId}}</td>
                            <td align="right">岗位:</td>
                            <td>{{formData.jobRole}}</td>
                            <td align="right">直接上级:</td>
                            <td>{{formData.puperior}}</td>
                        </tr>
                        <tr>
                            <td align="right">银行账号:</td>
                            <td>{{formData.bankCardNo}}</td>
                            <td align="right">公积金号:</td>
                            <td>{{formData.providentFund}}</td>
                            <td align="right">社保卡号:</td>
                            <td>{{formData.socialSecurityCard}}</td>
                        </tr>
                        <tr>
                            <td align="right">职称:</td>
                            <td>{{formData.jobTitleName}}</td>
                            <td align="right">职称职等:</td>
                            <td>{{formData.itileLevelName}}</td>
                            <td align="right">人员分类:</td>
                            <td>{{formData.onbordingStatus}}</td>
                        </tr>
                    </tbody>
                </table>
                <div class="row-box">
                    <div class="title">工作经历</div>

                    <el-table :data="formData.resumeList" height="250" border style="width: 100%">
                        <el-table-column type="index" width="50" label="序号"></el-table-column>
                        <el-table-column :formatter="dateFormat" prop="startTime" label="开始时间"></el-table-column>
                        <el-table-column :formatter="dateFormat" prop="endTime" label="结束时间"></el-table-column>
                        <el-table-column prop="company" label="工作单位"></el-table-column>
                        <el-table-column prop="department" label="所在部门"></el-table-column>
                        <el-table-column prop="workContent" label="工作内容"></el-table-column>
                        <el-table-column prop="resignationReason" label="离职原因"></el-table-column>
                    </el-table>
                </div>
                <div class="row-box">
                    <div class="title">教育经历</div>

                    <el-table
                        :data="formData.educationalExpList"
                        height="250"
                        border
                        style="width: 100%"
                    >
                        <el-table-column type="index" width="50" label="序号"></el-table-column>
                        <el-table-column :formatter="dateFormat" prop="startTime" label="开始时间"></el-table-column>
                        <el-table-column :formatter="dateFormat" prop="endTime" label="结束时间"></el-table-column>
                        <el-table-column prop="school" label="学校"></el-table-column>
                        <el-table-column prop="profession" label="专业"></el-table-column>
                        <el-table-column prop="education" label="学历"></el-table-column>
                    </el-table>
                </div>
                <!-- 上传附件 -->
                <upload-files :files="fileList" :isShowDel="false" v-if="flag"></upload-files>
            </div>
        </div>
    </div>
</template>

<script>
import VueCropper from 'vue-cropperjs';
import appMain from '../../../utils/app_main';
export default {
    name: 'employeeDetail',
    data() {
        return {
            pageTitle: '',
            formData: {
                bankCardNo: '', // 银行卡号
                birthday: '', // 出身日期
                correctDate: '', // 转正日期
                countryId: '', // 国籍id
                countryName: '', // 国籍名
                countryValue: '', // 国籍值
                departName: '', // 部门名称
                departId: '', // 部门编号
                domain: '', // 域名 ??????????????????????
                email: '', // 电子邮箱
                emergencyContact: '', // 紧急联系人
                emergencyNumber: '', // 紧急联系电话
                familyAddress: '', // 家庭住址
                gender: '', // 性别  男 1或者女 0
                graduateSchool: '', // 毕业院校
                graduationDate: '', // 毕业日期
                hometownId: '', // 籍贯id 字典项
                hometownName: '', // 籍贯名
                hometownValue: '', // 籍贯值
                id: '', // 主键 ??????????????????
                idPhoto: '', // 证件照片地址？？？？？？？？？？？？
                identityNo: '', // 身份证号码
                itileLevelId: '', // 职称等级id
                itileLevelName: '', // 职称等级
                itileLevelValue: '', // 职称等级值
                jobNumber: '', // 工号
                jobRole: '', // 所属岗位
                jobRoleId: '', // 所属岗位ID
                jobTitleId: '', // 职称id
                jobTitleName: '', // 职称名称
                jobTitleValue: '', // 职称值
                maritalStatus: '', // 婚姻状况 1 已婚 0 未婚
                mostDegree: '', // // 最高学位
                name: '', // 姓名
                onbordingStatus: '', // 入职状态 ？？？？？？？？？？？？？
                onbordingTime: '', // 入职时间
                phone: '', // 联系电话
                politicalStatusId: '', //字典项主键   政治面貌id
                politicalStatusName: '', // 字典项目名称   政治面貌
                politicalStatusValue: '', // 字典项值   政治面貌值
                profession: '', // 专业   自己手动填写即可
                providentFund: '', // 公积金号
                puperior: '', // 直属上级
                puperiorUserId: '', // 直属上级ID
                regResidence: '', // 户口
                regResidenceNature: '', // 户口性质:城镇户口/农村户口
                resignationDate: '', // 离职日期
                socialSecurityCard: '', // 社保卡号

                educationalExpList: '', // 教育经历
                resumeList: '' // 工作经历
            },
            userId: '',
            fileList: [],
            flag: false
        };
    },
    methods: {
        //根据id查询附件
        uploadFileInfoFindById(id) {
            appMain
                .uploadFileInfoFindById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.fileList = res.data.data;
                        this.flag = true;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 获取数据。
        getData() {
            //获取人员档案数据
            appMain
                .findEmployeeById({}, this.userId)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.formData = res.data.data;
                        this.uploadFileInfoFindById(this.userId);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        dateFormat(row, column, cellValue, index) {
            const daterc = row[column.property];
            if (daterc != null) {
                const dateMat = new Date(parseInt(daterc.replace('/Date(', '').replace(')/', ''), 10));
                const year = dateMat.getFullYear();
                const month = dateMat.getMonth() + 1;
                const day = dateMat.getDate();

                const timeFormat = year + '-' + month + '-' + day + ' ';
                return timeFormat;
            }
        }
    },
    components: {
        VueCropper
    },
    created() {
        if (this.$route.query.id) {
            this.userId = this.$route.query.id;
            //是更新操作
            this.getData();
        } else {
            this.$router.push({
                path: '/employeeList'
            });
        }
    },
    filters: {
        //时间过滤器
        formatDate: function(val) {
            let date = new Date(val);
            return appMain.formatDate(date, 'yyyy-MM-dd hh:mm:ss');
        }
    },
    watch: {},
    mounted() {
        this.pageTitle = this.$router.currentRoute.meta.title;
    }
};
</script>

<style scoped>
.container {
    padding-bottom: 50px;
}
.handle-box {
    padding: 5px 50px;
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;

    z-index: 1;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.mt20 {
    margin-top: 20px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

.table-form-box table {
    background-color: #666;
}
.table-form-box .h3 {
    font-size: 22px;
    text-align: center;
    font-weight: normal;
    padding: 20px 0;
}
.table-form-box table .tr-title td {
    font-size: 14px;
    line-height: 40px;
}
.table-form-box table td,
.table-form-box table th {
    background-color: #fff;
    padding: 10px 4px;
    min-height: 40px;
    font-size: 12px;
}
.color-ff2200 {
    color: #ff2200;
}

.pre-img {
    width: 100%;

    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
}
.crop-demo {
    display: flex;
    align-items: flex-end;
}
.crop-demo-btn {
    position: relative;
    width: 80px;
    height: 30px;
    line-height: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 10px;
    float: left;
    margin-right: 10px;
}
.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
.row-box {
    width: 100%;
    border: 1px solid #666;
    margin-top: 20px;
    font-size: 12px;
}
.row-box table {
    background-color: #fff;
}
.row-box .title {
    font-size: 14px;
    padding: 6px 4px;
}
.row-box .table-bd {
    height: 146px;
    width: 100%;
    overflow: auto;
}
.row-box .table-bd td {
    border-bottom: 1px solid #dfdfdf;
    padding: 4px;
    height: 28px;
    overflow: hidden;
}
</style>
